﻿var NUM = 0;
var n = 0;
var strIds = [];
var INTERVAL = 500;//曲线间时间间隔
var selectedRadioValue = "rblQushi";
var inter = null; //趋势描图数组指示器
var drawCan = "HYGGL"; //描图参数
var timer1 = null;
var n = 1;

///将点数转换成度数
function getArray(data) {
    var len = data.length;
    var array = new Array(len);
    for (var i = 0; i < len; i++) {
        var xValue = 360 / len * (i + 1);
        array[i] = [xValue, data[i]];
    }
    return array;
}

///清空描图区域
function canselSpline() {
    var chart = $('#container').highcharts();
    if (chart.series.length) {//清空描图区域
        var len = chart.series.length;
        for (var i = 0; i < len; i++) {
            chart.series[0].remove();
        }
    }

}
///描一条曲线
function drawSingleSpline(ID) {
  
    $.ajax({
        url: 'ajax.ashx',
        type: 'get',
        dataType: 'xml', //这里可以不写，但千万别写text或者html!!! 
        data: { id: ID, field: drawCan },
        timeout: 2000,
        cache: false,
        error: function (xml) {
            alert('数据有错误' + xml);
        },
        success: function (xml) {
            var data1 = [];
            $(xml).find("tables").children().each(function () {
                var l = $(this).children("l").text();
                data1.push(Number(l));
            });
            var chart = $('#container').highcharts();
            chart.addSeries({
                data: getArray(data1)
            });
            p.attr("title", chart.series.length - 1);
        }
    });
}
///取消一条曲线
function cancelSingleSpline(num) {
    var chart = $('#container').highcharts();
    $("#GridView1 .checkone :input").each(function () {
        var str1 = $(this).attr('title');
        if (Number(str1) != NaN) {
            if (Number(str1) > num) {
                $(this).attr('title', Number(str1) - 1);
            }
        }
    });
    chart.series[num].remove();

}
///描出所有选中的曲线
function drawSpline() {
    strIds = []; //ID序列
    NUM = 0;
    canselSpline(); //清空描图区域

    $("#GridView1 .checkone :input").each(function () {//描出选中的曲线
        if ($(this).attr('checked') == true) {
            NUM++;
            strIds.push($(this).parent().parent().parent().find(".jh").attr('title'));
        }
    });

    n = 1;
    if (NUM > 0) {
        var timer1 = setInterval(function () {
            canselSpline();
            drawSingleSpline(strIds[n - 1], drawCan);
            if (n++ >= NUM) {//跳出循环
                n = 1;
                clearInterval(timer1);
            }
        }, INTERVAL);
    }

}

///描出当前选中以后的曲线
function drawQushiSpline() {
    strIds = []; //ID序列
    NUM = 0;
    var conf = 0;//哨兵
    canselSpline(); //清空描图区域
    INTERVAL = 1000;
    
    $("#GridView1 .checkone :input").each(function () {
        if ($(this).attr('checked') == true) {
            if ($(this).parent().parent().parent().find(".jh").attr('title') == inter.parent().parent().parent().find(".jh").attr('title')) {
                conf = 1;
            }
            if (conf == 1) {
                NUM++;
                strIds.push($(this).parent().parent().parent().find(".jh").attr('title'));
            }
        }
    });

    n = 1;
    if (NUM > 0) {
        timer1 = setInterval(function () {
            canselSpline();
            $("#GridView1 .checkone :input:checked").each(function () {//取消非当前选中复选框
                if ($(this).parent().parent().parent().find(".jh").attr('title') == strIds[n - 1]) {
                    inter = $(this);
                    inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                }
            });
            drawSingleSpline(strIds[n - 1], drawCan);
            if (n++ >= NUM) {//跳出循环
                clearInterval(timer1);
                $('#btn_start').css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
            }
        }, INTERVAL);
    }
 
 
  

}
///清空GridView的复选框
function canselView() {

    $("#GridView1 .checkone :input").each(function () {//取消所有复选框
        $(this).attr("checked", false);
    });
}
///清空GridView的非当前选中的复选框
function canselNoIndexView() {

    $("#GridView1 .checkone :input:checked").each(function () {//取消非当前选中复选框
        if ($(this).parent().parent().parent().find(".jh").attr('title') != inter.parent().parent().parent().find(".jh").attr('title')) {
            $(this).attr("checked",false);
        }
    });
}
///全选GridView的复选框
function checkAllView() {
    $("#GridView1 .checkone :input").each(function () {//选中所有复选框
        $(this).attr("checked", true);
    });
}

$(document).ready(function () {

    ///给GridView1当前选中行变色
    $("#GridView1 tr:has(:checked)").addClass('selected');

    ///点击[下一条]触发事件
    $('#btn_next').click(function () {
        //让暂停按钮处于暂停状态
        $('#btn_start').val("  ");
        $('#btn_start').css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
        clearInterval(timer1);

        if (selectedRadioValue == "rblQushi") {//当前是趋势描图并且控制按钮处于激活状态
            if ($("#GridView1 .checkone :input:checked").length > 0) {
                if (inter != null) {
                    if ($("#GridView1 .checkone :input:checked").last().parent().parent().parent().find(".jh").attr('title') == inter.parent().parent().parent().find(".jh").attr('title')) {
                        inter = null;
                    }
                }
                if (inter == null) {
                    canselSpline(); //清空曲线
                    //得到选中列表中的第一个checkbox对象
                    inter = $("#GridView1 .checkone :input:checked").first();
                    inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                    strId = inter.parent().parent().parent().find(".jh").attr('title')
                    drawSingleSpline(strId);
                }
                else {//返回相对于inter的下一个checkbox
                    var find = false;
                    $("#GridView1 .checkone :input:checked").each(function () {

                        if (find) {
                            canselSpline(); //清空曲线
                            inter = $(this);
                            inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                            strId = inter.parent().parent().parent().find(".jh").attr('title');
                            drawSingleSpline(strId);
                            return false;
                        }
                        if ($(this).parent().parent().parent().find(".jh").attr('title') == inter.parent().parent().parent().find(".jh").attr('title')) {

                            find = true;
                        }


                    }); //end of each

                } // end of else 
            } //end if
            else {
                alert("您还没有选择曲线");
            }
        }

    });
    //点击[上一条]触发事件
    $('#btn_previous').click(function () {

        //让暂停按钮处于暂停状态
        $('#btn_start').val("  ");
        $('#btn_start').css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
        clearInterval(timer1);

        if (selectedRadioValue == "rblQushi") {//当前是趋势描图并且控制按钮处于激活状态
            if (inter == null) {//如果第一次点击或者指针在第一条，则描最后一条
                inter = $("#GridView1 .checkone :input:checked").last();
                canselSpline(); //清空曲线
                inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                strId = inter.parent().parent().parent().find(".jh").attr('title');
                drawSingleSpline(strId);
            }

            else {//返回相对于inter的上一个checkbox
                var pre = null; //保存当前的上一条
                $("#GridView1 .checkone :input:checked").each(function () {
                    if ($(this).parent().parent().parent().find(".jh").attr('title') == inter.parent().parent().parent().find(".jh").attr('title')) {
                        if ($(this).parent().parent().parent().find(".jh").attr('title') == $("#GridView1 .checkone :input:checked").first().parent().parent().parent().find(".jh").attr('title')) {
                            inter = $("#GridView1 .checkone :input:checked").last();
                            canselSpline(); //清空曲线
                            inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                            strId = inter.parent().parent().parent().find(".jh").attr('title');
                            drawSingleSpline(strId);
                            return false;
                        }
                        else {
                            canselSpline(); //清空曲线
                            inter = pre;
                            inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
                            strId = inter.parent().parent().parent().find(".jh").attr('title');
                            drawSingleSpline(strId);
                            return false;
                        }
                    }
                    else {
                        pre = $(this);
                    }
                }); //end of each

            } // end of else 
        }

    });
    ///暂停按钮点击事件
    $('#btn_start').click(function () {
        if (selectedRadioValue == "rblQushi") {
            if (inter == null)
                inter = $("#GridView1 .checkone :input:checked").first();

            if ($(this).val() == "  ") {//"  "代表暂停," "代表播放
                $(this).css("background", "url(../../images/DrawMult1/bf04.png) no-repeat");
                $(this).val(" ");
                drawQushiSpline();

            }
            else {

                $(this).val("  ");
                $(this).css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
                clearInterval(timer1);

            }
        }

    });

    //最后一条按钮点击事件
    $('#btn_last').click(function () {
        if (selectedRadioValue == "rblQushi") {
            //让暂停按钮处于暂停状态
            $('#btn_start').val("  ");
            $('#btn_start').css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
            clearInterval(timer1);

            inter = $("#GridView1 .checkone :input:checked").last();
            canselSpline(); //清空曲线
            inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
            strId = inter.parent().parent().parent().find(".jh").attr('title');
            drawSingleSpline(strId);
        }
    });

    //第一条按钮点击事件
    $('#btn_first').click(function () {
        if (selectedRadioValue == "rblQushi") {
            //让暂停按钮处于暂停状态
            $('#btn_start').val("  ");
            $('#btn_start').css("background", "url(../../images/DrawMult1/bf03.png) no-repeat");
            clearInterval(timer1);

            inter = $("#GridView1 .checkone :input:checked").first();
            canselSpline(); //清空曲线
            inter.parent().parent().parent().addClass('selected').siblings().removeClass('selected').end()//当前行变色
            strId = inter.parent().parent().parent().find(".jh").attr('title');
            drawSingleSpline(strId);
        }
    });

    ///描图参数button点击事件
    $("#btn_HYGGL").click(function () {//有功功率
        drawCan = "HYGGL";
        $(this).css("background-color", "yellow");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF")
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }


    });
    $("#btn_HWGGL").click(function () {//无功功率
        drawCan = "HWGGL";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF");
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }


    });
    $("#btn_HSZGL").click(function () {//视在功率
        drawCan = "HSZGL";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF");
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }

    });
    $("#btn_HGLYS").click(function () {//功率因数
        drawCan = "HGLYS";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF");
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }

    });
    $("#btn_ADL").click(function () {//电流
        drawCan = "ADL";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF");
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }
    });
    $("#btn_ADY").click(function () {//电压
        drawCan = "ADY";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_DJSCNJ").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }

    });
    $("#btn_DJSCNJ").click(function () {//扭矩
        drawCan = "DJSCNJ";
        $(this).css("background-color", "yellow");
        $("#btn_HYGGL").css("background-color", "#00FFFF");
        $("#btn_HWGGL").css("background-color", "#00FFFF");
        $("#btn_HSZGL").css("background-color", "#00FFFF");
        $("#btn_HGLYS").css("background-color", "#00FFFF");
        $("#btn_ADL").css("background-color", "#00FFFF");
        $("#btn_ADY").css("background-color", "#00FFFF");
        if (selectedRadioValue == "rblQushi") {
            canselSpline();
        }
        else {
            canselSpline();
            canselView();
        }

    });
    ///设置标题
    $('#ddlDrawCan').change(function () {
        var chart = $('#container').highcharts();
        chart.setTitle(null, { text: drawCan });
    });
    ///触发描图方式，设置间隔曲线时间间隔
    $("input:radio[name = 'radiobutton']").change(function () {
        var val = $(this).val();
        if (val == 'rblQushi') {
            INTERVAL = 5000;
            selectedRadioValue = 'rblQushi';
        }
        if (val == 'rblDuibi') {
            INTERVAL = 0;
            selectedRadioValue = 'rblDuibi';
        }
        if (val == 'rblSingle') {
            INTERVAL = 0;
            selectedRadioValue = 'rblSingle';
        }
    });

    ///全选框全选和全不选
    $("#checkboxall").click(function () {
        if ($(this).attr('checked') == true) {//全选
            checkAllView();
            if (selectedRadioValue == 'rblDuibi') {//全选时，如果是对比描图，将全部曲线描出
                drawSpline();
            }

        }
        else if ($(this).attr('checked') == false) {//全取消
            canselView();
            canselSpline();

        }
    });

    ///复选框列表中某个复选框触发
    $("#GridView1 .checkone :input").click(function () {

        //设置全选框状态
        $("#checkboxall").attr("checked", $("#GridView1 .checkone :input").length == $("#GridView1 .checkone :input:checked").length ? true : false);

        p = $(this);
        if ($(this).attr('checked') == true) {//复选框被选中，描一条曲线

            var ID = $(this).parent().parent().parent().find(".jh").attr('title'); //对应的记录ID
            if (selectedRadioValue == 'rblDuibi') {
                drawSingleSpline(ID); //描出对应曲线
            }
            else if (selectedRadioValue == 'rblSingle') {
                inter = $(this);
                canselSpline();
                canselNoIndexView();
                drawSingleSpline(ID); //描出对应曲线
            }

        }
        else { //复选框取消，删除对应的曲线
            var num = Number($(this).attr('title'));
            cancelSingleSpline(num); //取消曲线
        }

    });
    ///改变描图方式触发事件
    $('#radio_qushi').click(function () {
        canselSpline();
        $("#checkboxall").attr("disabled", false);
        inter = null;
    });
    $('#radio_duibi').click(function () {
        if ($('#radio_duibi').attr('checked') == true) {
            canselSpline();
            canselView();
            $("#checkboxall").attr("disabled", true);
            $("#checkboxall").attr("checked", false);
        }
    });
    $('#radio_single').click(function () {
        if ($('#radio_single').attr('checked') == true) {
            canselSpline();
            canselView();
            $("#checkboxall").attr("disabled", true);
            $("#checkboxall").attr("checked", false);
        }
    });

    $('#list_seconed').change(function () {
        alter("hello");

    });
    ///描图控件属性设置
    $('#container').highcharts({
        colors: [
                 '#ff7e08',
                 '#fd230a',
                 '#fbbc01',
                 '#9ff0000',
                 '#1afd0e',
                 '#4929f0',
                 '#f28ff3',
                 '#77a1f5',
                 '#c4f505',
                 '#f6c90a'
             ],

        chart: {
            zoomType: 'x',
            type: 'spline',
            marginRight: 5,
            events: {
                load: function () {

                }
            }
        },
        xAxis: {
            max: 360,
            tickInterval: 20
        },

        title: {
            text: '多井单参数数据描图',
            x: -20 //center
        },
        subtitle: {
            text: $("#ddlDrawCan  option:selected").text(),
            x: -20
        },

        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        plotOptions: {

            series: {
                animation: {
                    duration: 10
                }
            },

            spline: {
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                marker: {
                    enabled: false
                }

            }

        },
        series: []
    });


});